<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- saved from url=(0061)http://www.wikitude.com/doc/architect_tutorial/tutorial5.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <title>My ARchitect World</title>
    
    <!-- CSS Styles -->
    <style type="text/css">
        
        * {
            margin: 0;
        }
        html, body {
            height: 100%;
        }
        
        #footer{
            height: 4em;
            background-color: rgba(255,255,255,0.5);
            padding: 5px 10px;
            display:none;
            position:absolute;
            bottom: 0px;
            left: 0px;
            right:0px;
            moz-border-radius: 10px;
            -webkit-border-radius: 10px;
            -khtml-border-radius: 10px;
            border-radius: 10px;
            
        }
        
        /* CSS Style for status message at the top of the HUD */
        .status {
            border-radius: 2em;
            border: solid 2px #6d6d6d;
            background-color: rgba(256, 193, 0, 0.7);
            color: black;
            text-align: center;
            font-weight: bold;
            
            position:absolute;
            width: 90%;
            height: 5%;
            left: 5%;
            top: 1%;
        }
        }	
        </style>
    
    <!-- Include the ARchitect library -->
    <script src="architect://architect.js"></script>
    
    
</head>
    
    <body>
        <script>
            // Tutorial code using the ARchitect Javascript library
            
            // Create new images, which will be loaded right away
            firstImage = new AR.ImageResource("marker1.png", {onError: errorLoadingImage});
            secondImage = new AR.ImageResource("marker2.png", {onError: errorLoadingImage});
            thirdImage = new AR.ImageResource("marker3.png", {onError: errorLoadingImage});
            fourthImage = new AR.ImageResource("marker4.png", {onError: errorLoadingImage});
            fifthImage = new AR.ImageResource("marker5.png", {onError: errorLoadingImage});
            sixthImage = new AR.ImageResource("marker6.png", {onError: errorLoadingImage});
            
            
            // current selected object
            var selectedObject = null;
            
            
            //variable that keeps the jsonData received from the native app
            var jsonObject;
            
            
            //function that gets called when the displayed poi bubble is clicked
            //sends the id of the selected poi to the native app
            function generateOnPoiBubbleClickFunc(id)
            {
                return function()
                {
                    document.location = "architectsdk://opendetailpage?id="+id;  		
                }
            }
            
            
            // creates a property animation
            function createOnClickAnimation(imageDrawable)
            {
                var anim = new AR.PropertyAnimation( imageDrawable, 'scaling', 1.0, 1.2, 750, new AR.EasingCurve(AR.CONST.EASING_CURVE_TYPE.EASE_OUT_ELASTIC, {amplitude : 2.0}) );
                return anim;
            }
            
            
            // creates a function for assigning to label's and imageDrawable's onClickTrigger
            function createClickTrigger(id) 
            {
                return function() 
                {
                    // hide the bubble
                    document.getElementById("footer").style.display = 'block';
                    document.getElementById("poiName").innerHTML=jsonObject[id].name;
                    document.getElementById("poiDesc").innerHTML=jsonObject[id].description.substring(0,25);
                    document.getElementById("footer").onclick= generateOnPoiBubbleClickFunc(id);
                    
                    // reset the previous selected poi
                    if(selectedObject != null)
                    {
                        // reset the property animation
                        selectedObject.animation.stop();
                        
                        selectedObject.arLabel.style.backgroundColor = '#FFFFFF80';
                        selectedObject.img.scaling = 1.0;
                        selectedObject.poiObj.renderingOrder = 0;
                    }
                    
                    // set a new select status for the current selected poi
                    selectedObject = jsonObject[id];
                    selectedObject.arLabel.style.backgroundColor = '#FFFFFFFF';
                    selectedObject.poiObj.renderingOrder = 1;
                    
                    // start the assigned animation
                    selectedObject.animation.start();
                    
                    return true;
                }
            }
            
            //function called from the native app fia callJavascript method
            //receives json-data as string and processes the contained information
            function newData(jsonData){
                jsonObject = jsonData;
                document.getElementById("statusElement").innerHTML='Gira para encontrar el lugar de tu materia!';
                
                
                for(var i = 0; i < jsonObject.length; i++)
                {
                    var poidrawables = new Array();
                    var label = new AR.Label(jsonObject[i].name,1.0, {offsetY : -1.5,
                                             triggers: { 
                                             onClick:
                                             createClickTrigger(jsonObject[i].id)},
                                             style : {textColor : '#FFC100',backgroundColor : '#FFFFFF80'}});
                    
                    jsonObject[i].arLabel = label;
                    
                    var poiImage;
                    if(jsonObject[i].type == 1) 
                    {
                        poiImage = firstImage;
                    }
                    else if(jsonObject[i].type == 2)
                    {
                        poiImage = secondImage;
                    }
                    else if(jsonObject[i].type == 3)
                    {
                        poiImage = thirdImage;
                    }
                    else if(jsonObject[i].type == 4)
                    {
                        poiImage = fourthImage;
                    }
                    else if(jsonObject[i].type == 5)
                    {
                        poiImage = fifthImage;
                    }
                    else if(jsonObject[i].type == 6)
                    {
                        poiImage = sixthImage;
                    }
                    
                    
                    var img = new AR.ImageDrawable(poiImage, 2.0,
                                                   {triggers: { 
                                                   onClick:
                                                   createClickTrigger(jsonObject[i].id)}}
                                                   );
                    
                    jsonObject[i].animation = createOnClickAnimation(img);
                    jsonObject[i].img = img;
                    
                    poidrawables.push(label);
                    poidrawables.push(img);
                    geoLoc = new AR.GeoLocation(jsonObject[i].Point.latitude,jsonObject[i].Point.longitude,jsonObject[i].Point.altitude);
                    jsonObject[i].poiObj = new AR.GeoObject(geoLoc, {drawables: {cam: poidrawables}});
                }
                
                document.getElementById("statusElement").innerHTML='Gira para buscar el lugar donde se dictará tu materia';	
                
                
            }
            
            // Called if loading of the image fails.
            function errorLoadingImage() {
                // set error message on HUD
                document.getElementById("statusElement").innerHTML = "Unable to load image!";
            }
            
            
            // hide bubble and reset the selected poi if nothing was hit by a display click
            AR.context.onScreenClick = function()
            {
                // hide the bubble
                document.getElementById("footer").style.display = 'none';
                
                // and reset the current selected poi
                if(selectedObject != null)
                {
                    // reset the property animation
                    selectedObject.animation.stop();
                    
                    selectedObject.arLabel.style.backgroundColor = '#FFFFFF80';
                    selectedObject.img.scaling = 1.0;
                    selectedObject.poiObj.renderingOrder = 0;
                    selectedObject = null;
                }
            }
            
            </script>
        
        
		<!-- Status element at the top of the HUD -->
        <div id="statusElement" class="status"></div>
        <br/>
        <br/>
        <br/>
        <div id="footer">
            <h3><span id="poiName"></span></h3>
            Description: <span id="poiDesc"></span><br/>
            <p style="text-align:center;">Obtener más información...</p>
        </div>
    </body></html>